<template>
	<view class="lucky-tabs" :style="componentStyle">
		<slot></slot>
	</view>
</template>

<script setup>
	import {ref,provide,watch} from "vue"
	import {LUCKY_TABS_SYMBOL} from '@/common/constant.js'
	
	const emit = defineEmits(['input'])

	const props = defineProps({
		type:{
			type:String,
			default:'radius'
		},
		size:{
			type:String,
			default:"normal"
		},
		backgrounColor:{
			type:String,
			default:'#F6F6F6'
		},
		activeColor:{
			type:String,
			default:"#0026B5"
		},
		labelColor:{
			type:String,
			default:"#333333"
		},
		labelActiveColor:{
			type:String,
			default:"#FFFFFF"
		}
	})
	
	/**
	 * 样式配置
	 */
	const sizeMap = {
		normal:50
	}
	const componentStyle = ref({
		backgroundColor:props.backgrounColor,
		height:`${sizeMap[props.size]}rpx`,
		borderRadius:(sizeMap[props.size] / 2) + 'rpx'
	})
	
	/**
	 * 响应式
	 */
	const currentId = defineModel("currentId")
	watch(currentId,() => emit('input',currentId.value))
	
	
	/**
	 * 提供子组件数据
	 */
	const provideData = {
		activeColor:props.activeColor,
		labelActiveColor:props.labelActiveColor,
		height:sizeMap[props.size],
		currentId
	}
	provide(LUCKY_TABS_SYMBOL,provideData)
</script>

<style lang="less" scoped>
	.lucky-tabs {
		display:flex;
		align-items:center;
	}
</style>